<template>
  <div class="right-content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="检验报告" name="first">
        <div class="tabs-content">
          <item-menu :item-menu-data="itemMenuData" tab-type="link" views-data="oneItemMenu" @handleItemMenu="handleItemMenu" />
          <test-report :one-item-menu="oneItemMenu" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="检查报告" name="second" lazy>
        <div class="tabs-content">
          <item-menu :item-menu-data="inspectionReportData" views-data="inspectionReportItemData" tab-type="temp" @handleItemMenu="handleItemMenu" />
          <inspection-report :inspection-report-item-data="inspectionReportItemData" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="jzlbLabel" name="third" lazy>
        <div class="tabs-content">
          <item-menu :item-menu-data="dischargeRecordData" views-data="dischargeRecordItemData" tab-type="temp" @handleItemMenu="handleItemMenu" />
          <discharge-record :jzlb="jzlb" :discharge-record-item-data="dischargeRecordItemData" />
        </div>
      </el-tab-pane>
      <!--      <el-tab-pane label="体检记录" name="fourth" lazy>-->
      <!--        <div class="tabs-content">-->
      <!--          <physical-examination-record />-->
      <!--        </div>-->
      <!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import {
  getPatientAdmissionDischargeRecordByJzlsh,
  getPatientCheckRegisterInfoPatientCheckList,
  getPatientClinicEmergencyRecordList,
  getPatientExamRegistrationInfoList
} from '@/api/patientDetails'
import itemMenu from '@/views/patientDetails/components/itemMenu'
import testReport from '@/views/patientDetails/components/testReport'
import inspectionReport from '@/views/patientDetails/components/inspectionReport'
import dischargeRecord from '@/views/patientDetails/components/dischargeRecord'
// import physicalExaminationRecord from '@/views/patientDetails/components/physicalExaminationRecord'

export default {
  name: 'RightContent',
  components: {
    itemMenu,
    testReport, // 检验报告
    inspectionReport, // 检查报告
    dischargeRecord // 出院记录,
    // physicalExaminationRecord // 体检记录
  },
  props: {
    timeLineItem: {
      type: Object,
      default() {
        return {}
      }
    },
    searchQuery: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      itemMenuData: [],
      oneItemMenu: {},
      inspectionReportFlag: true,
      inspectionReportData: [],
      inspectionReportItemData: {},
      dischargeRecordFlag: true,
      dischargeRecordData: [],
      dischargeRecordItemData: {}
    }
  },
  computed: {
    jzlbLabel() {
      const jzlb = this.timeLineItem.jzlb
      return jzlb !== undefined ? jzlb === '住院' ? '出院记录' : '门诊记录' : '门诊记录'
    },
    jzlb() {
      const jzlb = this.timeLineItem.jzlb
      // 门诊：1， 住院：2， 无：0
      return jzlb !== undefined ? jzlb === '住院' ? 2 : 1 : 0
    }
  },
  watch: {
    timeLineItem: {
      handler() {
        if (this.jzlb > 0) {
          console.log(this.timeLineItem)
          this.getPatientExamRegistrationInfoList({
            jzlsh: this.timeLineItem.jzlsh,
            yljgbm: this.searchQuery.yljgbm
          })
        } else {
          this.itemMenuData = []
        }
        this.activeName = 'first'
        this.inspectionReportFlag = true
        this.dischargeRecordFlag = true
        this.inspectionReportData = []
        this.inspectionReportItemData = {}
        this.dischargeRecordData = []
        this.dischargeRecordItemData = {}
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleItemMenu(data) {
      const { row, viewsData } = data
      this[viewsData] = row
    },
    handleClick(tab, event) {
      if (tab.paneName === 'second') { // 检查报告
        if (this.inspectionReportFlag) {
          if (this.jzlb > 0) {
            this.getPatientCheckRegisterInfoPatientCheckList({
              // jzlsh: '1000002_1'
              jzlsh: this.timeLineItem.jzlsh
            })
          } else {
            this.inspectionReportData = []
          }
          this.inspectionReportFlag = false
        }
      } else if (tab.paneName === 'third') { // 门诊或住院
        if (this.dischargeRecordFlag) {
          if (this.jzlb === 1) { // 门诊
            this.getPatientClinicEmergencyRecordList({
              jzlsh: this.timeLineItem.jzlsh
            })
          } else if (this.jzlb === 2) { // 住院
            this.getPatientAdmissionDischargeRecordByJzlsh({
              jzlsh: this.timeLineItem.jzlsh
            })
          } else {
            this.dischargeRecordData = []
          }
          this.dischargeRecordFlag = false
        }
      }
    },
    // 检验
    getPatientExamRegistrationInfoList(params) {
      this.loadingModel('正在查询数据...')
      getPatientExamRegistrationInfoList(params).then((res) => {
        const { data } = res
        const list = data.list.map(item => {
          return {
            itemName: item.bglbmc,
            itemTime: item.jysj,
            ...item
          }
        })
        this.itemMenuData = list
        if (list.length > 0) {
          this.oneItemMenu =
            {
              ...list[0],
              yljgbm: this.searchQuery.yljgbm
            }
        } else {
          this.oneItemMenu = {}
        }
        this.loadingModelObj.close()
      }).catch(() => {
        this.loadingModelObj.close()
      })
    },
    // 检查
    getPatientCheckRegisterInfoPatientCheckList(params) {
      this.loadingModel('正在查询数据...')
      getPatientCheckRegisterInfoPatientCheckList(params).then((res) => {
        const { data } = res
        const list = data.map(item => {
          return {
            itemName: item.jcxmmc,
            itemTime: item.hzjcsj,
            ...item
          }
        })
        this.inspectionReportData = list
        if (list.length > 0) {
          this.inspectionReportItemData = list[0]
        } else {
          this.inspectionReportItemData = {}
        }
        this.loadingModelObj.close()
      }).catch(() => {
        this.loadingModelObj.close()
      })
    },
    // 门诊
    getPatientClinicEmergencyRecordList(params) {
      this.loadingModel('正在查询数据...')
      getPatientClinicEmergencyRecordList(params).then((res) => {
        const { data } = res
        const list = data.list.map(item => {
          return {
            itemName: item.jzksmc,
            itemTime: item.jzrq,
            ...item
          }
        })
        this.dischargeRecordData = list
        if (list.length > 0) {
          this.dischargeRecordItemData = list[0]
        } else {
          this.dischargeRecordItemData = {}
        }
        this.loadingModelObj.close()
      }).catch(() => {
        this.loadingModelObj.close()
      })
    },
    // 住院
    getPatientAdmissionDischargeRecordByJzlsh(params) {
      this.loadingModel('正在查询数据...')
      getPatientAdmissionDischargeRecordByJzlsh(params).then((res) => {
        const { data } = res
        const list = data.list.map(item => {
          return {
            itemName: item.ryksmc,
            itemTime: item.ryrq,
            ...item
          }
        })
        this.dischargeRecordData = list
        if (list.length > 0) {
          this.dischargeRecordItemData = list[0]
        } else {
          this.dischargeRecordItemData = {}
        }
        this.loadingModelObj.close()
      }).catch(() => {
        this.loadingModelObj.close()
      })
    }
  }
}
</script>

<style lang="scss">
.right-content{
  flex-grow: 1;
  background: #fff;
  .el-tabs{
    height: 100%;
  }
  .el-tabs__header{
    height: 40px;
    margin-bottom:0;
    padding-left:20px;
    background: linear-gradient(90deg, #008CE7 0%, #05C3D1 100%);
  }
  .el-tabs__content{
    height: calc(100% - 40px);
  }
  .el-tab-pane{
    height: 100%;
  }
  .el-tabs__nav-wrap::after,
  .el-tabs__active-bar{
    display: none;
  }
  .el-tabs__item{
    height:38px;
    line-height: 38px;
    margin-top:2px;
    font-size: 16px;
    color:#fff;
  }
  .el-tabs__item.is-active{
    border-top-left-radius: 4px ;
    border-top-right-radius: 4px;
    color: #05C1D3;
    background: #fff;
  }
  .el-tabs__item:hover{
    color: #05C1D3;
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--top .el-tabs__item.is-top:last-child{
    padding-right: 20px;
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }
}
</style>

<style lang="scss" scoped>
.tabs-content{
  overflow: hidden;
  height: 100%;
  .item-menu{
    float:left;
    height: 100%;
  }
  .item-menu-main{
    float:left;
    height: 100%;
    width: calc(100% - 210px);
    padding: 15px;
    background: #fff;
  }
}
</style>
